<script setup>
import { ref,onMounted,provide } from 'vue'
import { useRouter,RouterLink, RouterView } from 'vue-router'
const activeMenuIdx=ref('1')
const options=ref({
  baseUrl: 'http://localhost:11434',
  options: {
    num_ctx: 2048,
    temperature: 0,
    seed: 0,
    top_k: 40,
    top_p: 0.9,
    min_p: 0.0,
    repeat_penalty: 1.1,
    repeat_last_n: 64,
    n_predict:128,
  }
})
const router = useRouter()
const models=ref([])
provide('models', models) // 提供 models 数据
provide('options', options) // 提供 models 数据

onMounted  (()=> {
  fetch(options.value.baseUrl+'/api/tags')
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      models.value = data.models;
      console.log(data)
    })
    .catch(error => console.error(error));
})
function handleSelect(idx) {
  router.push(idx);
  console.log(idx)
}
</script>

<template>
    <el-container style="height:100%">
      <el-header>
        <el-menu
            :default-active="activeMenuIdx"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true"
            @select="handleSelect"
          >
            <el-menu-item index="/home">Ollama Home</el-menu-item>
            <el-sub-menu index="/models">
              <template #title>Model</template>
              <el-menu-item v-for="(model,index) in models" :index="'/models/'+model.model">{{model.name}}</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/options">options</el-menu-item>
          </el-menu>
      </el-header>
      <el-main>
          <RouterView :key="$route.fullPath"/>
      </el-main>
    </el-container>
</template>

<style scoped>
.el-header,.el-main {
  padding: 0;
  margin: 0;
  background-color: #FAFCFF;
}

</style>
